<template>
  <div class="job-container" v-loading="loading">
    <div class="job-container-search">
      <el-input
        v-model="jobPageQuery.keywords"
        style="width: 60%; height: 48px"
        placeholder="搜索职位关键词"
      >
        <template #append>
          <el-button :icon="Search" style="width: 68px" @click="getJobPage" />
        </template>
      </el-input>
    </div>
    <div style="display: flex; justify-content: center; align-items: center">
      <el-text type="info">职位类型：</el-text>
      <el-cascader
        v-model="selectedTag"
        :options="tagDatas"
        :props="customProps"
        :show-all-levels="false"
        clearable
        @change="getJobPage"
        style="width: 128px; margin-right: 12px"
      />
      <el-text type="info">城市：</el-text>
      <el-select
        v-model="jobPageQuery.location"
        placeholder="城市"
        size="large"
        clearable
        @change="getJobPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in constantEnum.LOCATION_ENUM"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-text type="info">学历：</el-text>
      <el-select
        v-model="jobPageQuery.eduction"
        placeholder="学历"
        size="large"
        clearable
        @change="getJobPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in constantEnum.EDUCATION_ENUM"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-text type="info">求职类型：</el-text>
      <el-select
        v-model="jobPageQuery.type"
        placeholder="求职类型"
        size="large"
        clearable
        @change="getJobPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in constantEnum.JOB_TYPE"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-text type="info">经验：</el-text>
      <el-select
        v-model="jobPageQuery.experience"
        placeholder="经验"
        size="large"
        clearable
        @change="getJobPage"
        style="width: 128px; margin-right: 12px"
      >
        <el-option
          v-for="item in constantEnum.EXPERIENCE_ENUM"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div
      style="
        width: 100%;
        padding: 20px 68px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: flex-start;
      "
    >
      <div
        v-for="item in jobDatas"
        @click="$router.push('/hr/info/job/' + item.id)"
        class="job-item"
      >
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 78%;
          "
        >
          <div>
            <el-text type="success" size="large">{{ item.name }}</el-text>
            <el-text type="danger" size="large" style="margin-left: 12px">
              {{ item.minSalary }}-{{ item.maxSalary }}K
            </el-text>
          </div>
          <div style="margin: 0px 4px">
            <el-tag type="info" style="margin-right: 8px">
              {{ item.tagName }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ item.location }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleEducationEnum(item.eduction) }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleExperienceEnum(item.experience) }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleJobType(item.type) }}
            </el-tag>
          </div>
          <div style="display: flex; align-items: center; margin: 0px 8px">
            <el-avatar
              :size="22"
              shape="square"
              :src="item.companyInfoVo.logo"
            ></el-avatar>
            <span style="margin-left: 8px">
              {{ item.companyInfoVo.name }}
            </span>
            <el-tag type="info" style="margin-left: 8px">
              {{ item.companyInfoVo.industryName }}
            </el-tag>
            <el-tag type="info" style="margin-left: 8px">
              {{ handleFinancingStage(item.companyInfoVo.financingStage) }}
            </el-tag>
            <el-tag type="info" style="margin-left: 8px">
              {{ handleScala(item.companyInfoVo.scala) }}
            </el-tag>
          </div>
        </div>
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 78px;
          "
        >
          <el-avatar :src="item.jorHrInfoVo.avatar" :size="42" />
          <div class="job-item-hr">
            <p style="padding: 4px 0">{{ item.jorHrInfoVo.realname }}</p>
            <el-text type="info">{{ item.jorHrInfoVo.job }}</el-text>
          </div>
          <el-button
            type="warning"
            round
            class="job-item-button"
            :disabled="judgeHr()"
            @click.stop="gotoChat(item)"
          >
            聊一聊
          </el-button>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center; padding-bottom: 24px">
      <el-pagination
        v-model:current-page="jobPageQuery.pageNum"
        :page-size="jobPageQuery.pageSize"
        background
        layout="total, prev, pager, next"
        :total="jobTotal"
        @size-change="getJobPage"
        @current-change="getJobPage"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { constantEnum } from '@/constant/type'
import { CascaderProps, ElMessage } from 'element-plus'
import { JobPageQuery, JobType } from '@/api/job/type'
import { reqGetJobPageBySeeker } from '@/api/job'
import {
  handleEducationEnum,
  handleExperienceEnum,
  handleJobType,
  handleFinancingStage,
  handleScala,
} from '@/constant/type'
import { reqGetAllTag } from '@/api/tag'
import { TagType } from '@/api/tag/type'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'

onMounted(() => {
  getJobPage()
  getAllTag()
  judgeHr()
})

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const judgeHr = () => {
  if (userStore.isHr === 1) {
    console.log('hr身份')
    return true
  }
  console.log('求职者身份')
  return false
}

const tagDatas = ref<TagType[]>([])
const customProps: CascaderProps = {
  expandTrigger: 'hover' as const,
  value: 'id', // 自定义当前数组的键名 - value
  label: 'name', // 自定义当前数组的键名 - label
  children: 'children', // 自定义当前数组的键名 - children
}

const loading = ref(false)
const selectedTag = ref<number[]>()
const jobPageQuery = ref<JobPageQuery>({
  pageNum: 1,
  pageSize: 10,
  keywords: (route.query.q as string) ? (route.query.q as string) : '',
  location: '',
  type: undefined,
  tag: undefined,
  eduction: undefined,
  experience: undefined,
})

const needJobPageQuery = computed(() => {
  let data: JobPageQuery = {
    pageNum: jobPageQuery.value.pageNum,
    pageSize: jobPageQuery.value.pageSize,
    keywords: jobPageQuery.value.keywords,
    location: jobPageQuery.value.location,
    type:
      typeof jobPageQuery.value.type == 'number'
        ? jobPageQuery.value.type
        : undefined,
    eduction:
      typeof jobPageQuery.value.eduction == 'number'
        ? jobPageQuery.value.eduction
        : undefined,
    experience:
      typeof jobPageQuery.value.experience == 'number'
        ? jobPageQuery.value.experience
        : undefined,
    tag: selectedTag.value
      ? selectedTag.value[selectedTag.value.length - 1]
      : undefined,
  }
  return data
})

const jobDatas = ref<JobType[]>()
const jobTotal = ref(0)

const getJobPage = async () => {
  try {
    loading.value = true
    const { data } = await reqGetJobPageBySeeker(needJobPageQuery.value)
    jobDatas.value = data.data.list
    jobTotal.value = data.data.total
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    loading.value = false
  }
}

const getAllTag = async () => {
  let storageTag = sessionStorage.getItem('allTag')
  if (storageTag != null) {
    tagDatas.value = JSON.parse(storageTag)
    return
  }
  try {
    const { data } = await reqGetAllTag()
    sessionStorage.setItem('allTag', JSON.stringify(data.data))
    tagDatas.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  }
}

const gotoChat = (jobInfo: JobType) => {
  sessionStorage.setItem('jobInfo', JSON.stringify(jobInfo))
  router.push({
    path: '/chat',
    query: {
      jId: jobInfo.id,
    },
  })
}
</script>

<style scoped lang="scss">
.job-container {
  max-width: 100vw;
  min-width: 1200px;
  background: #dcdcdc8d;

  .job-container-search {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .job-item {
    width: 40%;
    height: 128px;
    margin: 8px;
    padding: 12px;
    border-radius: 12px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    cursor: pointer;

    .job-item-button {
      display: none;
    }

    .job-item-hr {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .job-item:hover {
    .job-item-button {
      margin-top: 6px;
      display: block;
    }

    .job-item-hr {
      display: none;
    }
  }
}
</style>
